<template>
	<el-container style="height: 100vh; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu
				:default-openeds="openList"
				:router="true"
				:default-active="pagePath"
				:unique-opened="false"
			>
				<!-- index接收字符串类型，这个地方是数字，所有需要转一下 -->
				<!-- i是从0开始的，所以要+1 -->
				<el-submenu
					:index="(i + 1).toString()"
					v-for="(v, i) in navList"
					:key="i"
				>
					<template slot="title"
						><i class="el-icon-menu"></i>{{ v.authName }}</template
					>
					<!-- 路径加个/就不会覆盖了 -->
					<el-menu-item
						:index="'/index/' + item.path"
						v-for="(item, index) in v.children"
						:key="index"
						>{{ item.authName }}</el-menu-item
					>
				</el-submenu>
			</el-menu>
		</el-aside>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-dropdown>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>{{ username }}</span>
			</el-header>
			<el-main>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<el-breadcrumb separator="/">
							<el-breadcrumb-item :to="{ path: $route.path }">{{
								$route.meta.title
							}}</el-breadcrumb-item>
							<el-breadcrumb-item>{{
								$route.meta.subTitle
							}}</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<!-- 在组件切换过程中将状态保留在内存中，防止重复渲染dom，使用这个会衍生出两个钩子函数 -->
					<!-- 显示主页面内容 -->
					<keep-alive>
						<!-- 需要缓存的视图组件 -->
						<router-view v-if="$route.meta.keepAlive"></router-view>
					</keep-alive>
					<!-- 不需要缓存的视图组件 -->
					<router-view v-if="!$route.meta.keepAlive"></router-view>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	// import axios from "axios";
	import createRoute from "@/minixs/creatdRoute";
	import { menusGet } from "@/http/request.js";
	export default {
		// 公共的东西使用mixins来代替
		mixins: [createRoute],
		data() {
			return {
				navList: [],
				openList: ["1"],
				pagePath: "/index/users",
			};
		},
		watch: {
			// 当路由发生变化的时候，就把最新的地址给到pagePath变量，作用是为了保持菜单栏高亮显示以及解决点击不跳转的bug
			$route: {
				handler(newV) {
					this.pagePath = newV.path;
				},
				immediate: true,
			},
		},
		created() {
			this.getNavList();
		},
		computed: {
			username: function () {
				return localStorage.username;
			},
		},
		methods: {
			// 退出登录
			quit() {
				// 清除所有本地缓存
				localStorage.clear();
				setTimeout(() => {
					this.$router.push("/");
				}, 500);
			},
			getNavList() {
				menusGet("menus")
					.then((res) => {
						// console.log(res.data);
						let { data, meta } = res.data;
						if (meta.status == 200) {
							//获取成功
							this.navList = data;
							// 动态添加路由信息,解决刷新不调接口，把他存在localstroage里,第一个路由是默认的，索引从1 开始
							localStorage.arrRoute = JSON.stringify(this.navList.slice(1));
							this.createRouteFn();
						} else {
							// 防止数据获取失败，给出提示
							this.$message.error(meta.msg);
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<style soped>
	.el-header {
		background-color: #b3c0d1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>

